<template>
  <ul class='list'>
    <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  data () {
    return {}
  },
  components: {
    TodoItem
  },
  created () {
    console.log('list:', this)
  },
  computed: {
    todos () {
      // 从 Vuex 的 store 中获取 todos 的状态数据
      return this.$store.state.todos
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
